<template>
  <div class="app-container">
    <div class="top-bar-container">
      <el-row>
        <el-col :span="16">
          <div class="search-container">
            <search-form @search-submit="getKnowledgeList">
              <search-input v-model="listQuery.id" placeholder="ID" />
              <search-input v-model="listQuery.question" placeholder="问题" />
            </search-form>
          </div>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="end">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="handleCreateKnowledge">新增知识
            </el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row>

      <el-table-column align="center" label="问题" prop="question" />

      <el-table-column align="center" label="答案" prop="answer">
        <template v-slot="scope">
          <div class="text-ellipsis">
            {{ scope.row.answer }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="知识类型" prop="knowledgeType">
        <template v-slot="scope">
          {{ knowledgeTypeMap[scope.row.type] }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间" prop="createdTime" width="160">
        <template v-slot="scope">
          {{ scope.row.createdTime | formatDateTime }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="更新时间" prop="updatedTime" width="160">
        <template v-slot="scope">
          {{ scope.row.updatedTime | formatDateTime }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="280"
      >
        <template v-slot="scope">
          <el-button-group>

            <el-button
              type="warning"
              size="mini"
              title="编辑"
              @click="handleEditKnowledgeRow(scope.$index)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              title="删除"
              @click="handleDeleteKnowledgeRow(scope.$index)"
            >
              删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getKnowledgeList"
    />

    <el-dialog
      :title="editForm.id ? '编辑知识' : '新增知识'"
      :visible.sync="dialogEditVisible"
      width="900px"
      @close="handleEditFormDialogClose"
    >
      <el-form ref="editForm" :model="editForm" :rules="editRules" class="edit-form" autocomplete="on">

        <el-form-item prop="type" label="知识类型" label-width="80px">
          <el-select v-model="editForm.type" placeholder="请选择知识类型">
            <el-option
              v-for="item in knowledgeTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="question" label="问题" label-width="80px">
          <el-input v-model="editForm.question" />
        </el-form-item>

        <el-form-item prop="answer" label="回答" label-width="80px">
          <el-input v-model="editForm.answer" type="textarea" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveKnowledge">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查看知识"
      :visible.sync="dialogViewVisible"
      width="900px"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index.vue'
import SearchForm from '@/components/SearchForm/index.vue'
import SearchInput from '@/components/SearchForm/SearchInput/index.vue'
import {
  adminKnowledgeCreate,
  adminKnowledgeDelete,
  adminKnowledgeSearch,
  adminKnowledgeUpdate
} from '@/api/rest/knowledge'
import { elRequiredRule } from '@/utils/el-validator'
import { dictConfigItemByDictKeyList } from '@/api/rest/dictconfig'
import { DICT_CONFIG_KEY_KNOWLEDGE_TYPE } from '@/utils/constant'

const initForm = {
  id: null,
  question: null,
  answer: null,
  type: null
}

export default {
  name: 'KnowledgeList',
  components: { SearchInput, Pagination, SearchForm },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        id: null,
        name: null,
        page: 1,
        limit: 10
      },
      editForm: { ...initForm },
      editRules: {
        question: [elRequiredRule],
        answer: [elRequiredRule],
        type: [elRequiredRule]

      },
      dialogEditVisible: false,
      dialogViewVisible: false,
      knowledgeTypeList: [],
      knowledgeTypeMap: [],
      currentKnowledge: null

    }
  },
  computed: {},
  created() {
    this.getKnowledgeTypeList()
    this.getKnowledgeList()
  },
  methods: {
    getKnowledgeList() {
      this.listLoading = true
      adminKnowledgeSearch(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },

    getKnowledgeTypeList() {
      dictConfigItemByDictKeyList(DICT_CONFIG_KEY_KNOWLEDGE_TYPE)
        .then(response => {
          this.knowledgeTypeList = []
          const map = {}
          response.data.forEach(item => {
            this.knowledgeTypeList.push({ value: item.itemValue, name: item.itemName })
            map[item.itemValue] = item.itemName
          })
          this.knowledgeTypeMap = map
        })
    },

    handleEditKnowledgeRow(index) {
      const _item = { ...this.list[index] }

      this.editForm = { ..._item }
      this.dialogEditVisible = true
    },
    handleDeleteKnowledgeRow(index) {
      const data = this.list[index]
      this.$confirm('此操作将删除知识, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        adminKnowledgeDelete(data.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除知识成功'
          })
          this.getKnowledgeList()
        }).catch(() => {
        })
      })
    },
    handleCreateKnowledge() {
      this.editForm = { ...initForm }
      this.dialogEditVisible = true
    },
    handleSaveKnowledge() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.editForm.id) {
            adminKnowledgeUpdate(this.editForm).then(response => {
              this.$message({
                message: '编辑知识成功',
                type: 'success'
              })
              this.getKnowledgeList()
              this.dialogEditVisible = false
            })
          } else {
            adminKnowledgeCreate(this.editForm).then(response => {
              this.$message({
                message: '新增知识成功',
                type: 'success'
              })
              this.getKnowledgeList()
              this.dialogEditVisible = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleEditFormDialogClose() {
      this.$refs.editForm.clearValidate()
    }
  }
}
</script>
<style scoped lang="scss">

.flex-column {
  display: flex;
  flex-direction: column;

  ::v-deep .el-form-item__label {
    width: 80px;
  }

  .el-form-item__content {
    margin-left: 0;
  }
}

.text-ellipsis {
  display: inline-block;
  white-space: normal;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  // white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

</style>

